<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/minireset.css/0.0.2/minireset.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css" rel="stylesheet">
    <title>playGround</title>
    <style>
        [v-cloak] {
            visibility: hidden;
        }

        .app-box {
            padding: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="app-main" v-cloak>
        <el-row>
            <el-col class="app-box" :span="12">
                <el-input
                        type="textarea"
                        :rows="20"
                        placeholder="请输入内容"
                        v-model="sendBoxInput">
                </el-input>
                <div>
                    行数:  {{sendBoxInputRows}}
                </div>
            </el-col>
            <el-col class="app-box" :span="12">
                <el-input
                        type="textarea"
                        :rows="20"
                        v-model="outBox">
                </el-input>
                <div>
                    行数: {{outBoxRows}}
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col class="app-box" :span="24">
                <el-button @click="handleClickTransBtn">转换</el-button>
            </el-col>
        </el-row>
    </div>
</div>
<script type="text/html" id="test">
    <div class="container">
        <!-- 面包屑导航 -->
        <el-breadcrumb class="mainTab" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item class="mianName" :to="{ path: '/main/main' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item>产品管理</el-breadcrumb-item>
            <el-breadcrumb-item>管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="behavior-card">
            <div class="proInfo">
                <div class="proinfoimg">
                    <el-image
                            class="proLogo"
                            :src="productListInfo.imgUrl"
                    ></el-image>
                    <div class="nameItem">
                        <label class="name">产品名称：{{ productListInfo.productName }}</label>
                    </div>
                </div>
                <div class="proInfoItem">
                    <div class="proinfoitemchild">
                        <label class="proTypefor">推广策略：{{ productListInfo.pushType }}</label>
                    </div>
                    <div class="proinfoitemchild">
                        <label class="proType">状态：{{ productListInfo.up ? '已上线' : '未上线' }}</label>
                    </div>
                    <div class="proinfoitemchild">
                        <label class="proType">系统类型:{{ MyTradeClass }}</label>
                    </div>
                    <div class="proinfoitemchild">
                        <label class="proType">对接状态：{{ productListInfo.process ? '接口已对接' : '接口对接中' }}</label>
                    </div>
                </div>
                <div class="button">
                    <el-button type="danger">删除</el-button>
                </div>
            </div>
        </el-card>
        <el-card class="behavior-card">
            <div class="behaviorInfo">
                <div class="behavior_btn" @click="editProduct">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/产品.png"
                    ></el-image>
                    <label>修改产品</label>
                </div>
                <div class="behavior_btn" @click="editProductInfo">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/详情.png"
                    ></el-image>
                    <label>产品详情管理</label>
                </div>
                <div class="behavior_btn" @click="eductionCenter">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/学习时间.png"
                    ></el-image>
                    <label>学习中心</label>
                </div>
                <div class="behavior_btn" @click="pushListDrawer=true">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/软文推广.png"
                    ></el-image>
                    <label>推广详单</label>
                </div>
                <div class="behavior_btn" @click="showQuestionBox">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/问题.png"
                    ></el-image>
                    <label>收到的问题</label>
                </div>
                <div class="behavior_btn" @click="showPushLocationBox">
                    <el-image
                            class="btn_ico"
                            src="/static/icons/地点.png"
                    ></el-image>
                    <label>推广地点</label>
                </div>
                <div class="behavior_btn" @click="handleClickLiveBtn">
                    <el-image class="btn_ico" src="/static/icons/live.png"></el-image>
                    <label>直播管理</label>
                </div>
            </div>
        </el-card>
        <!-- 编辑产品详情的对话框 -->
        <el-drawer :visible.sync="editProductDrawer" size="50%" @close="DetailClose">
            <el-form class="apiCheck" label-width="40%" :rules="editRules" ref="editRefs" :model="editListInfo">
                <el-form-item label="产品图片">
                    <uploadSinger @uploadSuccess='childUpload' :newUrls='editListInfo.imgUrl'
                                  ref="ProductImageRefs"></uploadSinger>
                </el-form-item>
                <el-form-item label="产品名称" prop="productName">
                    <el-input v-model="editListInfo.productName" style="width:70%"></el-input>
                </el-form-item>
                <el-form-item label="是否上线" prop="up">
                    <el-select v-model="editListInfo.up" style="width:70%">
                        <el-option label="已上线" :value="1"></el-option>
                        <el-option label='未上线' :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="简介" prop="introd">
                    <el-input v-model="editListInfo.introd" style="width:70%" type="textarea"
                              :rows="3">
                    </el-input>
                </el-form-item>
                <el-form-item label="产品类型" prop="productType">
                    <el-select v-model="editListInfo.productType" style="width:70%">
                        <el-option label="暂未分类" :value="0"></el-option>
                        <el-option label="线上产品" :value="1"></el-option>
                        <el-option label="商品服务" :value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品分类" prop="tradeClass">
                    <el-cascader :options="selectProduct" v-model="editListInfo.tradeClass" :props="addNewL" style="width:70%">
                    </el-cascader>
                </el-form-item>
                <el-form-item label="推广类型" prop="pushtype">
                    <el-select v-model="editListInfo.pushType" style="width:70%">
                        <el-option label="注册" value="1"></el-option>
                        <el-option label="充值+注册" value="2"></el-option>
                        <el-option label="仅充值" value="3"></el-option>
                        <el-option label="出售" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="sub_btnBox">
                <el-button class="sub_btn" @click="submitChangeProduct" type="primary">提交</el-button>
                <!-- <el-button class="sub_btn" type="warning">获取开发文档</el-button> -->
            </div>
        </el-drawer>
        <!--接口对接管理-->
        <el-drawer :visible.sync="drawer" direction="rtl" size="50%" :before-close="ApiDialogClose" @close="ApiClose">
            <div class="idBox">
                <label class="Iditem"></label>
                <label class="Iditem"></label>
            </div>
            <div class="wrap">
                <el-form class="apiCheck" label-width="35%" :rules="apiRules" ref="ApiRefs" :model="ApiList">
                    <el-form-item label="注册接口" prop="registerUrl">
                        <el-input v-model="ApiList.registerUrl" style="width: 60%">
                            <template slot="prepend">Http://</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="注册查验接口" prop="checkRisterUrl">
                        <el-input v-model="ApiList.checkRisterUrl" style="width: 60%">
                            <template slot="prepend">Http://</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="充值类型接口" prop="chargeTypeUrl">
                        <el-input v-model="ApiList.chargeTypeUrl" style="width: 60%">
                            <template slot="prepend">Http://</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="充值接口" prop="chargeUrl">
                        <el-input v-model="ApiList.chargeUrl" style="width: 60%">
                            <template slot="prepend">Http://</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="用户充值查验接口" prop="checkChargeUrl">
                        <el-input v-model="ApiList.checkChargeUrl" style="width: 60%">
                            <template slot="prepend">Http://</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div class="reApiBox">
                <label class="reApi">充值回调调借:XXXXXXXXXXXXXXXX</label>
                <label class="reApi">注册回调接口:XXXXXXXXXXXXXXXX</label>
            </div>
            <div class="sub_btnBox">
                <el-button class="sub_btn" @click="apiSubmit" type="primary">提交</el-button>
                <el-button class="sub_btn" type="warning">获取开发文档</el-button>
            </div>
        </el-drawer>
        <!--投入金额管理-->
        <el-drawer :visible.sync="pricedrawer" direction="rtl" size="60%" :before-close="moneyClose">
            <div>
                <el-table style="width:80%; margin:0 auto;" :row-style="{height:'80px'}" show-summary :data="showMoney">
                    <el-table-column prop="class" width="180"/>
                    <el-table-column label="企业报价"/>
                    <el-table-column label="用户返佣"/>
                    <el-table-column label="会员返佣"/>
                    <el-table-column label="已用金额"/>
                    <el-table-column label="已实现效果"/>
                </el-table>
            </div>
            <div class="sub_btnBox">
                <el-button class="sub_btn" @click="moneyClose">离开</el-button>
            </div>
        </el-drawer>
        <!--产品学习中心-->
        <el-drawer :visible.sync="pushDrawer" direction="rtl" size="70%" @close='studyListClose'>
            <div v-if="pushDrawer"><i></i>
                <div class="btnBox">
                    <el-button class="add_btn" type="primary" @click="addNewStudyClick">快速添加</el-button>
                </div>
                <el-table highlight-current-row :data="studyInfoList" style="width: 100% " heigh="1000px">
                    <el-table-column prop="id" align="center" label="ID"/>
                    <el-table-column prop="text" align="center" label="内容"/>
                    <el-table-column prop="type" align="center" label="图片" width="200">
                        <template v-slot="scoped">
                            <div v-if="scoped.row.type === 1">
                                <div v-if="scoped.row.medial.length >0">
                                    <div>
                                        <el-image :preview-src-list="scoped.row.medial  "
                                                  style="width: 70px; height: 70px"
                                                  :src="scoped.row.medial[0]"
                                                  fit="scale-down"
                                        ></el-image>
                                    </div>
                                    <span v-if="scoped.row.medial.length > 1" class="image-text">点击查看更多</span>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" align="center" label="视频" width="200">
                        <template v-slot="scoped">
                            <div v-if="scoped.row.type === 2">
                                <vuevideo :newUrls='item' v-for="item in scoped.row.medial" :key="item.index" class="video-vue">
                                </vuevideo>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button @click="editStudy(scope.row)" type="warning" size="small">管理</el-button>
                            <el-button @click="deleteStudy(scope.row)" type="danger" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="page-controll"
                               @size-change='studySizeChange'
                               @current-change="studyPagesChange"
                               layout="sizes, prev, pager, next,total"
                               :page-size="studyInfoPageList.size"
                               :page-sizes="[5,10,20]"
                               :current-page="studyInfoPageList.page"
                               :total="studyInfoPageList.totalCount">
                </el-pagination>
                <!--添加学习产品的抽屉-->
                <el-drawer :append-to-body="true" size="45%" :visible.sync="innerDrawer" @close="closeAddStudy">
                    <el-card v-if="innerDrawer" body-style="height:100%">
                        <el-form ref="form" :model="addStudyList" label-width="200px" destroy-on-close="true">
                            <el-form-item label="新增的产品内容">
                                <el-input v-model="addStudyList.text" style="width:50%"></el-input>
                            </el-form-item>
                            <el-form-item label="选择添加图片/视频">
                                <el-select v-model="addFormNumber" style="width:50%" @change='makeSureAddSelect'>
                                    <el-option label="请选择" :value="0" v-show="addStudyList.type!=0"></el-option>
                                    <el-option label="添加图片" :value="1"></el-option>
                                    <el-option label="添加视频" :value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <div v-show="addStudyList.type === 1" class="videoBox">
                                <el-form-item label="上传图片">
                                    <upload ref='addUploadimgs' @uploadSuccess="addupLoadImage"></upload>
                                </el-form-item>
                            </div>
                            <div v-show="addStudyList.type === 2" class="videoBox">
                                <el-form-item label="上传视频">
                                    <div style="height:100px">
                                        <uploadvideo ref="adduploadVideo" @uploadSuccess="addUpVideo"></uploadvideo>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-form>
                        <div class="addStudybuttonclass">
                            <el-button type="primary" @click="addSubmit">确定增加</el-button>
                            <el-button type="warning" @click="canceladd">取消增加</el-button>
                        </div>
                    </el-card>
                </el-drawer>
                <!--编辑学习详情的抽屉-->
                <el-drawer :visible.sync="studyDrawerVisible" size="45%" :modal="false" @close='editStuduDraweClose'>
                    <el-card v-if="studyDrawerVisible">
                        <el-form ref="form" :model="editStudyList" label-width="200px" destroy-on-close="true">
                            <el-form-item label="内容">
                                <el-input v-model="editStudyList.text"></el-input>
                            </el-form-item>
                            <el-form-item label="上传图片/视频">
                                <el-select v-model="editformNumber" @change="editSelect">
                                    <el-option label="上传图片" :value="1" :disabled="editformNumber == 2"></el-option>
                                    <el-option label="上传视频" :value="2" :disabled="editformNumber == 1"></el-option>
                                </el-select>
                            </el-form-item>
                            <div v-show="editformNumber === 1">
                                <el-form-item label="上传图片">
                                    <upload ref='uploadimgs' @uploadSuccess="uploadImage"></upload>
                                </el-form-item>
                            </div>
                            <div v-show="editformNumber === 2">
                                <el-form-item label="上传视频">
                                    <uploadvideo ref="uploadVideo" @uploadSuccess="upVideo"></uploadvideo>
                                </el-form-item>
                            </div>
                        </el-form>
                        <div>
                            <el-button type="primary" @click="editSubmit">确定修改</el-button>
                            <el-button type="warning" @click="cancelEdit">取消修改</el-button>
                        </div>
                    </el-card>
                </el-drawer>
            </div>
        </el-drawer>
        <!--推广详单-->
        <el-drawer :visible.sync="pushListDrawer" direction="rtl" size="800px">
            <el-table highlight-current-row :data="tableData" style="width: 100%">
                <el-table-column prop="date" align="center" label="ID" width="80"></el-table-column>
                <el-table-column prop="name" align="center" label="内容" width="150"></el-table-column>
                <el-table-column prop="name" align="center" label="图片" width="120"></el-table-column>
                <el-table-column prop="name" align="center" label="视频" width="120"></el-table-column>
                <el-table-column prop="name" align="center" label="状态" width="120"></el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">管理</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-drawer>
        <!--推广图制作-->
        <el-drawer :visible.sync="pushImgDrawer" direction="rtl" size="50%" @close="leavePushPic">
            <div class="btnBox">
                <el-button class="add_btn" type="primary" @click="addNewPictureClick">快速添加</el-button>
            </div>
            <el-table highlight-current-row :data="companyPushMedial" style="width: 95%">
                <el-table-column prop="id" align="center" label="ID"></el-table-column>
                <el-table-column prop="text" align="center" label="内容">
                </el-table-column>
                <el-table-column prop="imgUrl" align="center" label="图片" width="200">
                    <template v-slot="scoped">
                        <el-image :src="scoped.row.imgUrl" style="width:80px;height:80px"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="up" align="center" label="状态" width="100">
                    <template v-slot="scoped">
                        <el-tag type="primary" size="mini" v-show="scoped.row.up == 1">有效</el-tag>
                        <el-tag type="warning" size="mini" v-show="scoped.row.up == 0">无效</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作" width="250">
                    <template v-slot="scope">
                        <!-- <el-button @click="editPushProduct(scope.row)" type="primary" size="small" >预览</el-button> -->
                        <el-button @click="previewPushProduct(scope.row)" type="warning" size="small">编辑</el-button>
                        <el-button type="danger" size="small" @click="deletePushProduct(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="showPages">
                <el-pagination
                        @size-change='pushPicSizeChange'
                        @current-change="pushPicPageChange"
                        layout="sizes, prev, pager, next,total"
                        :page-size="proppushPicspages.size"
                        :page-sizes="[5,10,30]"
                        :current-page="proppushPicspages.page"
                        :total="pushpicstotal">
                </el-pagination>
            </div>
            <!--推广图新增操作-->
            <el-drawer :append-to-body="true" :visible.sync="addNewPushVisble" @close="closeAddNewPushPics" size="40%">
                <el-form :model="addNewPushPicObj" label-width="300px" ref="addNewPushPicForm" size="middle"
                         :rules="addNewPushRules">
                    <el-form-item label="请输入推广图的text" prop="text">
                        <el-input v-model="addNewPushPicObj.text" style="width:50%"></el-input>
                    </el-form-item>
                    <el-form-item label="请选择图片">
                        <uploadSinger @uploadSuccess="uploadAddPushPics" ref="uploadAddPushPicsRefs"></uploadSinger>
                    </el-form-item>
                    <canvasBill ref="canvasForAdd" @addCanvas="addCanvas"></canvasBill>
                    <el-form-item>
                        <el-button @click="addNewPushPics" type="primary">确认新增</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
            <!--进行编辑图片操作-->
            <el-drawer :append-to-body="true" :visible.sync="editNewPushVisble" @close="closeEditNewPushPics" size="40%">
                <div class="editor" v-if="editNewPushVisble">
                    <el-form :model="editNewPushPicObj" label-width="300px" ref="editNewPushPicForm" size="middle"
                             :rules="editNewPushRules">
                        <el-form-item label="请输入推广图的text">
                            <el-input v-model="editNewPushPicObj.text" style="width:50%"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <uploadSinger @uploadSuccess="uploadEditPushPics" ref="uploaEditPushPicsRefs"></uploadSinger>
                        </el-form-item>
                        <canvasBill ref="canvasForEdit"></canvasBill>
                        <el-form-item>
                            <el-button @click="editNewPushPics" type="primary">确认修改</el-button>
                        </el-form-item>
                    </el-form>

                </div>
            </el-drawer>

        </el-drawer>
        <!-- 收到的问题对话框 -->
        <problemFeedbackDialog :product-id="proId"/>
        <!-- 进行编辑产品细节 -->
        <el-drawer title="进行编辑产品细节" :visible.sync="editProductDetailShow" @close="editProductDetailClose"
                   :with-header="false"
                   size="50%">
            <div style="width:80% ;margin-left:10%;margin-top:10%" v-if="editProductDetailShow" class="richEdit">
                <quilleditor ref="quilleditorEdit" @editDetailSuccess="editDetailSuccess"></quilleditor>
                <div class="leaveEdit">
                    <el-button @click="editProductDetailCloseable" type="danger">离开修改</el-button>
                </div>
            </div>
        </el-drawer>
        <!--编辑推广地点-->
        <el-drawer :visible.sync="locationBoxshow" @close="locationBoxClose" :with-header="false" size="50%" :before-close="locationBoxCloseCallBack">
            <div v-if="locationBoxshow" class="location-box">
                <productPushLocation :id="proId"/>
            </div>
        </el-drawer>
    </div>
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    (() => {
        Vue.use(ELEMENT);

        let App = new Vue({
            el: "#app",
            data() {
                return {
                    sendBoxInput: $("#test").html(),
                    outBox: ""
                }
            },
            methods: {
                async handleClickTransBtn() {
                    let Rs = await $.post("/api/getHtml", {
                        html: this.sendBoxInput
                    })
                    this.outBox = Rs.data;
                }
            },
            computed:{
                sendBoxInputRows(){
                    return  this.sendBoxInput.split(/\r*\n/).length
                },
                outBoxRows(){
                    return  this.outBox.split(/\r*\n/).length
                }
            }
        })
    })()
</script>
</body>
</html>
